<template>
   <div class="guide">
        <div class="guide-bg"></div>
        <div class="guide-content">
            <div class="top">
                   <div class="box">
                        <img src="../static/img/i-first.png" alt="">
                        <p>分享我的生活</p>
                   </div>
            </div>
            <div class="bottom">
                <div class="box-1">
                    <router-link to="/login_list">
                        <van-button round block color="#FF2A43">登录</van-button>
                    </router-link>
                    <router-link to="/home">
                        <van-button round block color="rgba(255,255,255,.5)">先去逛逛</van-button>
                    </router-link>
                </div>
            </div>
        </div>
   </div>
</template>
<style lang="less">
@import '@/static/less/common.less';
.guide-bg , .guide-content{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.guide-content {
    z-index: 3;
}
.guide-bg {
    background-image: url(../static/img/guide-bg.png);
    background-size: cover;
}
.guide-content {
    background-color: rgba(0,0,0,.6);
    .top {
        height: 10.6667rem;
        // background-color: red;
        width: 100%;
        color: #fff;

        // 居中元素(的写法7种+)
        display: flex;
        justify-content: center;
        align-items: center;
    
        // display: grid;
        // place-items: center;

        .box-1 {
            text-align: center;
            img {
                height: 1.6rem;
            }
            p {
                line-height: 175%;
            }
        }
    }
    .bottom {
        padding: @pad;
    }
}

.van-button--block {
    margin-top: .5333rem;
    border:0;
}
</style>